<div class="inspector-container" style="height:100%">
	<div style="display:table;height:100%;width:100%;" ng-hide="hasAgentData">
		<div style="display:table-cell;vertical-align:middle;padding:0 10%;">
			<div class="alert alert-block alert-info">
				<h4>Info</h4>
				<div class="msg">Please select period above and an agent on the left.</div>
			</div>
		</div>
	</div>
	<div ng-show="hasAgentData">
		<div ng-include=" 'error' "></div>
		<div ng-include=" 'warning' "></div>
		<div ng-include=" 'info' "></div>
		<div ng-include=" 'loading' "></div>
		<div class="slider">
			<div class="slider-command">
				<div class="btn-group" style="margin-right:22px">
					<button type="button" class="btn btn-default btn-success btn-sm" ng-click="movePrev()"><span class="glyphicon glyphicon-backward"></span></button>
					<button type="button" class="btn btn-default btn-success btn-sm" ng-click="moveNext()"><span class="glyphicon glyphicon-forward"></span></button>
					<button type="button" class="btn btn-default btn-success btn-sm" ng-click="moveHead()"><span class="glyphicon glyphicon-fast-forward"></span></button>
				</div>
				<div class="btn-group" style="margin-right:4px;">
					<button type="button" class="btn btn-default btn-success btn-sm" ng-click="zoomInTimeSlider()"><span class="glyphicon glyphicon-plus"></span></button>
					<button type="button" class="btn btn-default btn-success btn-sm" ng-click="zoomOutTimeSlider()"><span class="glyphicon glyphicon-minus"></span></button>
				</div>

				<div class="input-group input-group-sm" style="width:189px;margin-right:4px;">
					 <span class="input-group-btn">
						 <button class="btn btn-default btn-success"><span class="current-point"></span></button>
					 </span>
					 <input id="target-picker" type="text" class="form-control">
				</div>
			</div>
			<span>Timeline</span>
			<svg id="timeSlider" class="timeSlider" width="100%" height="90px" style="margin-top:6px"></svg>
		</div>
		<div class="panel panel-info" ng-show="showEventInfo">
			<div class="panel-heading">
				<h3 class="panel-title">{{eventInfo.eventTypeDesc}} - Event <span class="glyphicon glyphicon-remove" style="float:right;cursor:pointer" aria-hidden="true" ng-click="hideEventInfo()"></span></h3>
			</div>
			<div class="panel-body">
				<table class="table table-condensed" style="font-size:12px;">
					<tbody>
						<tr>
							<td class="col-md-2 text-left"><strong>Event Time</strong></td>
							<td class="col-md-10 text-left">{{formatDate(eventInfo.eventTimestamp)}}</td>
						</tr>
						<tr>
							<td class="text-left"><strong>Description</strong></td>
							<td class="text-left">{{eventInfo.eventTypeDesc}}</td>
						</tr>
						<tr ng-show="eventInfo.hasEventMessage">
							<td class="text-left"><strong>Message</strong></td>
							<td class="text-left">{{eventInfo.eventMessage}}</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
		<div>
			<!--h3 style="text-align:right"><span style="font-size:16px;font-weight:normal;border-radius:0px" class="label label-default">{{formatDate(selectTime)}}</span></h3-->
			<div class="row">
				<div class="col-md-12">
					<table class="table table-condensed" style="font-size:12px;margin-bottom:0px">
						<tbody>
						<tr>
							<td colspan="4"><h4>Information</h4></td>
						</tr>
						<tr>
							<td class="col-md-2 text-right"><strong>Application Name</strong></td>
							<td class="col-md-4 text-left" ng-show="isSameApplication()">{{agent.applicationName}}</td>
							<td class="col-md-4 text-left" ng-hide="isSameApplication()"><span style="color:red">{{agent.applicationName}}</span> <button type="button" class="btn btn-xs btn-danger _wrongApp" ng-click="toggleHelp(this)" style="font-size:10px;float:right" data-toggle="popover" data-container="body" data-trigger="manual"  data-placement="bottom"><span class="glyphicon glyphicon-exclamation-sign"></span></button></td>
							<td class="col-md-2 text-right"><strong>Agent Version</strong></td>
							<td class="col-md-4 text-left">{{agent.agentVersion}}</td>
						</tr>
						<tr>
							<td class="text-right"><strong>Agent Id</strong></td>
							<td class="text-left">{{agent.agentId}}</td>
							<td class="text-right"><strong>PID</strong></td>
							<td class="text-left">{{agent.pid}}</td>
						</tr>
						<tr>
							<td class="text-right"><strong>Hostname</strong></td>
							<td class="text-left">{{agent.hostName}}&nbsp;
								<ul ng-if="agent.linkList" style="padding:0px;margin:0px;display:inline;">
									<li ng-repeat="link in agent.linkList" style="list-style:none;padding:0px;margin:0px;display:inline;padding-left:4px;">
										<a ng-if="link.linkType == 'aTag'" class="btn btn-default btn-xs" href="{{link.linkURL}}" target="_blank">{{link.linkName}}</a>
									</li>
								</ul>
								<a ng-if="agent.linkName" class="btn btn-default btn-xs" href="{{agent.linkURL}}" target="_blank" title="System resource monitoring site">{{agent.linkName}}</a>
							</td>
							<td class="text-right"><strong>JVM&nbsp;(GC Type)</strong></td>
							<td class="text-left" ng-if="agent.vmVersion">{{agent.vmVersion}}&nbsp;({{agent.jvmGcType}})</td>
							<td class="text-left" ng-if="!agent.vmVersion">{{agent.jvmGcType}}</td>
						</tr>
						<tr>
							<td class="text-right"><strong>IP</strong></td>
							<td class="text-left">
								<div>{{agent.ip}}</div>
							</td>
							<td class="text-right"><strong>Start Time</strong></td>
							<td class="text-left">{{agent.startTimestamp | date:'yyyy-MM-dd HH:mm:ss Z'}}</td>
						</tr>
						<tr>
							<td class="text-right"><strong>Service Type</strong></td>
							<td class="text-left">
								{{agent.serviceType}}
								<span ng-show="agent.serverMetaData">
									<span ng-show="agent.serverMetaData.serverInfo.length">&nbsp;({{agent.serverMetaData.serverInfo}})&nbsp;</span>
									<button type="button" class="btn btn-default btn-xs" ng-click="toggleShowDetail($event)" ng-show="agent.serverMetaData.vmArgs.length || agent.serverMetaData.serviceInfos.length">Detail</button>
								</span>
							</td>
							<td class="text-right"><strong>End Status</strong></td>
							<td class="text-left">{{agent.status.state.desc}} (last checked : {{agent.status.eventTimestamp | date:'yyyy-MM-dd HH:mm:ss Z'}})</td>
						</tr>
						</tbody>
					</table>
				</div>
			</div>
			<div ng-show="showDetail" style="margin-top:4px;">
				<div class="detailIndicator" style="position:relative;width:0;height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid #BBB5B5;"></div>
				<div class="row">
					<div class="col-md-12">
						<table class="table table-condensed table-bordered" style="font-size:12px;margin-bottom:20px;">
							<tbody>
							<tr class="active">
								<td class="col-md-2 text-right"><strong>Server Info</strong></td>
								<td class="col-md-10 text-left">
									<span ng-show="agent.serverMetaData.serverInfo.length">{{agent.serverMetaData.serverInfo}}</span>
									<span ng-hide="agent.serverMetaData.serverInfo.length">N/A</span>
								</td>
							</tr>
							<tr style="background-color:#FFF;">
								<td class="text-right"><strong>JVM Arguments</strong></td>
								<td class="text-left">
									<div style="overflow:auto;max-height:200px;" ng-show="agent.serverMetaData.vmArgs.length">
										<ul class="list-unstyled">
											<li ng-repeat="vmArg in agent.serverMetaData.vmArgs track by $index">{{vmArg}}</li>
										</ul>
									</div>
									<span ng-hide="agent.serverMetaData.vmArgs.length">N/A</span>
								</td>
							</tr>
							<tr class="active">
								<td class="text-right"><strong>Services</strong></td>
								<td class="text-left">
									<div class="row" ng-show="agent.serverMetaData.serviceInfos.length">
										<div class="col-md-4 service-list">
											<div class="list-group">
												<a href="" class="list-group-item clearfix" ng-class="{active: currentServiceInfo == serviceInfo, disabled: serviceInfo.serviceLibs.length == 0}"
												   ng-repeat="serviceInfo in agent.serverMetaData.serviceInfos" style="padding:4px 10px" ng-click="selectServiceInfo(serviceInfo)">
													{{serviceInfo.serviceName}}
													<span class="pull-right" ng-show="serviceInfo.serviceLibs.length > 0">&gt;</span>
												</a>
											</div>
										</div>
										<div class="service-libs" style="overflow:auto;max-height:140px;margin-right:20px">
											<ul class="list-unstyled">
												<li ng-repeat="serviceLib in currentServiceInfo.serviceLibs track by $index" style="{{hasDuplicate(serviceLib, $index)}}">{{serviceLib}}</li>
											</ul>
										</div>
									</div>
									<span ng-hide="agent.serverMetaData.serviceInfos.length">N/A</span>
								</td>
							</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
		<div class="chart-collection">
			<div class="row">
				<div class="col-md-6">
					<h4><span class="glyphicon glyphicon-question-sign heapTooltip" style="cursor:pointer;float:right;"></span> {{memoryGroup[0].title}}</h4>
					<jvm-memory-chart-directive namespace="forHeap"></jvm-memory-chart-directive>
				</div>
				<div class="col-md-6">
					<h4><span class="glyphicon glyphicon-question-sign permGenTooltip" style="cursor:pointer;float:right;"></span> {{memoryGroup[1].title}}</h4>
					<jvm-memory-chart-directive namespace="forNonHeap"></jvm-memory-chart-directive>
				</div>
			</div>
			<hr>
			<div class="row">
				<div class="col-md-6">
					<h4><span class="glyphicon glyphicon-question-sign cpuUsageTooltip" style="cursor:pointer;float:right;"></span> {{cpuLoadChart.title}}</h4>
					<cpu-load-chart-directive namespace="forCpuLoad"></cpu-load-chart-directive>
				</div>
				<div class="col-md-6">
					<h4><span class="glyphicon glyphicon-question-sign tpsTooltip" style="cursor:pointer;float:right;"></span> {{tpsChart.title}}</h4>
					<tps-chart-directive namespace="forTps"></tps-chart-directive>
				</div>
			</div>
		</div>
	</div>
</div>